<template>
    <div class="orderdetails">
        <div class="heard">
            <p>
                <van-icon name="arrow-left" @click="$router.back()" />
                <van-icon name="service-o" size="22" @click="$router.push('/Customerservice')" />
            </p>
        </div>
        <div class="body">
            <div class="address">
                <p class="icon" style="color: #a7a7a7;"><van-icon name="wap-home-o" /></p>
                <section>
                    <p>{{ details.userAddress }}</p>
                    <p style="color: #666;"><span class="name">{{ details.userName }}</span><span>{{ details.userPhone
                    }}</span></p>
                </section>
            </div>
            <div class="goods">
                <div class="shop">
                    <p class="icon" style="color: #a7a7a7;"><van-icon name="shop-o" /></p>
                    <section>
                        <p>华北七鲜云超</p>
                        <p style="color: #666;">北京市大兴区经济技术开发区荣华南路2号大族广场购物中心1层</p>
                    </section>
                </div>
                <div>
                    <van-card :num="details.productSum" :price="details.productPrice" :title="details.productTitle"
                        :thumb="details.productImg" />
                </div>
            </div>
            <div class="price">
                <section class="top" style="color: #666;">
                    商品总额<p><span style="color: #000;">￥</span><span style="color: #000;">{{ details.orderPrice }}</span></p>
                </section>
                <section class="bottom" style="color: #666;">
                    实付款<span class="money" style="color:red ;">￥</span><span
                        style="color:red ; font-size: 18px; font-weight: bold;">{{ details.orderPrice }}</span>
                </section>
            </div>
            <div class="order">
                <p><span>订单编号：</span>{{ details.orderId }}</p>
                <p><span>下单时间：</span>2023-09-20 19:25:21</p>
                <p><span>支付方式：</span>京东支付/微信支付</p>
                <p style="border-top: 1px solid #f3f3f3;padding-top: 16px;"><span>发票类型：</span>不开发票</p>
            </div>
        </div>
    </div>
</template>

<script>
import orders from '@/api/orders';

export default {
    data() {
        return {
            details: {}
        };
    },
    mounted() {
        // console.log(this.$route.query.orderid, '哈哈哈哈哈');
        this.getOrderDetails();
        // console.log(localStorage.getItem);
    },
    methods: {

        async getOrderDetails() {
            let id = this.$route.query.orderid;
            // console.log(id)
            let res = await orders.getOrderDetails(Number(id))
            console.log(res, 'res');
            this.details = res.data;
            console.log(this.details);
        }
    },

}
</script>

<style lang="scss" scoped>
.orderdetails {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, #f6f7f8, #c3ead8, #00cd67);

    .heard {
        height: 45px;

        p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            margin-top: 20px;
            color: #fff;
        }
    }

    .body {
        width: 90%;
        margin: 0 auto;
        flex: 1;
        overflow: scroll;


        .address {
            display: flex;
            align-items: center;
            border-radius: 14px;
            margin: 10px 0;
            background: #fff;
            height: 70px;

            p {
                padding: 5px 0;
            }

            .icon {
                font-size: 20px;
                margin-right: 20px;
            }

            .name {
                margin-right: 30px;
            }
        }

        .goods {
            border-radius: 14px;
            margin: 10px 0;
            background: #fff;

            .shop {
                display: flex;

                p {
                    padding: 5px 0;
                }

                .icon {
                    font-size: 20px;
                    margin-right: 20px;
                }
            }


        }

        .price {
            height: 100px;
            border-radius: 14px;
            margin: 10px 0;
            background: #fff;

            section {
                padding: 18px 10px;
            }

            .top {
                display: flex;
                justify-content: space-between;
            }

            .bottom {
                text-align: right;

                .money {
                    margin-left: 10px;
                }
            }
        }

        .order {
            border-radius: 14px;
            height: 200px;
            background: #fff;

            p {
                padding: 10px 10px;
            }
        }

        .van-card__title {
            font-size: 14px;
            color: #000;
        }

        .van-card__num {
            font-size: 14px;
            color: #000;
        }

        .van-card__price {
            font-size: 14px;
            color: #000;
        }

        .van-card__price {
            color: red;
        }
    }
}</style>